<template>
  <div style="width:100vw;" class="patent-box">
    <!-- <div class="record-header">
      <mt-header fixed title="项目经验">
        <router-link to="/growup" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <mt-navbar v-model="active">
      <mt-tab-item id="tab-container1">公司级</mt-tab-item>
      <mt-tab-item id="tab-container2">集团级</mt-tab-item>
      <mt-tab-item id="tab-container3">省部级</mt-tab-item>
      <mt-tab-item id="tab-container4">国家级</mt-tab-item>
    </mt-navbar>
    <div class="page-tab-container">
      <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
        <mt-tab-container-item id="tab-container1">
          <!-- cell组件 -->
          <div style="padding-top:0.4rem;" class="patent-body">
            <!-- <router-link to="/pojectExperice/projectDetails"> -->
            <div class="bscroll" ref="bscroll1">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="companyList.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id)"
                  v-for="(item,index) in companyList"
                  :key="index"
                  class="patent-card"
                >
                  <div class="patent-content">
                    <div style="margin-bottom:15px;" class="flex-row">
                      <div class="content-tip">{{item.projectIntroduce}}</div>
                      <div class="content-tip-icon">
                        <span class="iconfont iconbulb"></span>
                      </div>
                    </div>
                    <div class="flex-row">
                      <div class="content-tip">
                        <span class="iconfont iconxingming"></span>
                        {{item.userName}}
                      </div>
                      <div class="content-tip-date">{{item.projectStarttime}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container2">
          <!-- cell组件 -->
          <div style="padding-top:0.4rem;" class="patent-body">
            <div class="bscroll" ref="bscroll2">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="cliqueList.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id)"
                  v-for="(item,index) in cliqueList"
                  :key="index"
                  class="patent-card"
                >
                  <div class="patent-content">
                    <div style="margin-bottom:15px;" class="flex-row">
                      <div class="content-tip">{{item.projectIntroduce}}</div>
                      <div class="content-tip-icon">
                        <span class="iconfont iconbulb"></span>
                      </div>
                    </div>
                    <div class="flex-row">
                      <div class="content-tip">
                        <span class="iconfont iconxingming"></span>
                        {{item.userName}}
                      </div>
                      <div class="content-tip-date">{{item.projectStarttime}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container3">
          <!-- cell组件 -->
          <div style="padding-top:0.4rem;" class="patent-body">
            <div class="bscroll" ref="bscroll3">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="provincialList.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id)"
                  v-for="(item,index) in provincialList"
                  :key="index"
                  class="patent-card"
                >
                  <div class="patent-content">
                    <div style="margin-bottom:15px;" class="flex-row">
                      <div class="content-tip">{{item.projectIntroduce}}</div>
                      <div class="content-tip-icon">
                        <span class="iconfont iconbulb"></span>
                      </div>
                    </div>
                    <div class="flex-row">
                      <div class="content-tip">
                        <span class="iconfont iconxingming"></span>
                        {{item.userName}}
                      </div>
                      <div class="content-tip-date">{{item.projectStarttime}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container4">
          <!-- cell组件 -->
          <div style="padding-top:0.4rem;" class="patent-body">
            <div class="bscroll" ref="bscroll4">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="countryList.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id)"
                  v-for="(item,index) in countryList"
                  :key="index"
                  class="patent-card"
                >
                  <div class="patent-content">
                    <div style="margin-bottom:15px;" class="flex-row">
                      <div class="content-tip">{{item.projectIntroduce}}</div>
                      <div class="content-tip-icon">
                        <span class="iconfont iconbulb"></span>
                      </div>
                    </div>
                    <div class="flex-row">
                      <div class="content-tip">
                        <span class="iconfont iconxingming"></span>
                        {{item.userName}}
                      </div>
                      <div class="content-tip-date">{{item.projectStarttime}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <!-- <transition :name="transitionName">
      <router-view></router-view>
    </transition>-->
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
export default {
  name: "testUI",
  data() {
    return {
      active: "tab-container1",
      companyList: [],
      cliqueList: [],
      provincialList: [],
      countryList: []
    };
  },
  watch: {
    active(before, after) {
      let params = {
        projectlevel: 1
      };
      if (before == "tab-container1") {
        params.projectlevel = 1;
        this.getProjectAjax("companyList", params);
      } else if (before == "tab-container2") {
        params.projectlevel = 2;
        this.getProjectAjax("cliqueList", params);
      } else if (before == "tab-container3") {
        params.projectlevel = 3;
        this.getProjectAjax("provincialList", params);
      } else if (before == "tab-container4") {
        params.projectlevel = 4;
        this.getProjectAjax("countryList", params);
      }
    }
  },
  mounted() {
    let params = {
      projectlevel: 1
    };
    // 公司级项目
    this.getProjectAjax("companyList", params);
    // better-scroll初始化
    this.initScroll("bscroll1");
    this.initScroll("bscroll2");
    this.initScroll("bscroll3");
    this.initScroll("bscroll4");
    setText("项目经验");
  },
  methods: {
    goDetail(id) {
      this.$router.push({ path: "/projectDetails", query: { id } });
    },
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        console.log(bscrollDom);
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    },
    getProjectAjax(type, params) {
      this.$get("getProject", params).then(res => {
        if (res.success) {
          this[type] = res.data;
        }
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("~@/pagecss/patent.less");
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.bscroll-container {
  padding: 10/75rem 10/75rem 50px;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
</style>
